<template>
  <div>
    <div class="list-btn">
      产品名称:
      <Input v-model.trim="params.name" placeholder="请输入产品名称" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      状态:
      <Select clearable style="width:200px" v-model="params.status" placeholder="全部">
        <Option value= ''>全部</Option>
        <Option :value=1>上架</Option>
        <Option :value=2>下架</Option>
      </Select>
    </div>
    <div class="list-btn">
      最后操作时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px"></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px" ></DatePicker>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
      <Button
        type="primary"
        style="margin-left:5px;"
        @click="() =>{
           this.$router.push({
             path:'/work/credit/edit',
             query:{title:'新增产品'},
           })
        }">
       新增产品
      </Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>

  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    data () {
      return {
        tag: {
          'title': '借贷产品管理',
          'path': '/work/credit/list'
        },
       listTitle: [
        {
          title: "产品名称",
          key: "name",
          align: "left",
          minWidth:120
        },
         {
           title: "产品天数",
           key: "day",
           align: "center",
           minWidth:90,

         },
         {
          title: "金额(元)",
          key: "money",
          align: "center",
          minWidth:80,
          render : (h,params) => {
            return h('div', this.toYuan(params.row.money))
          }
        },
         {
          title: "实际放款金额(元)",
          key: "realMoney",
          align: "center",
          minWidth:130,
          render : (h,params) => {
            return h('div', this.toYuan(params.row.realMoney))
          }
        },
         {
          title: "总费用(元)",
          key: "totalCost",
          align: "center",
          minWidth:100,
          render : (h,params) => {
            return h('div', this.toYuan(params.row.totalCost))
          }
        },
         {
          title: "服务费(元)",
          key: "serviceCharge",
          align: "center",
          minWidth:100,
          render : (h,params) => {
            return h('div', this.toYuan(params.row.serviceCharge))
          }
        },
         {
          title: "利息(元)",
          key: "repayInterest",
          align: "center",
          minWidth:80,
          render : (h,params) => {
            return h('div', this.toYuan(params.row.repayInterest))
          }
        },

         {
          title: "日利率(%)",
          key: "dayRate",
          align: "center",
          minWidth:120,
          render : (h,params) => {
            return h('div',((params.row.dayRate)*100).toFixed(2))
          }
        },
        {
          title: "手续费利率(%)",
          key: "poundageRate",
          align: "center",
          minWidth:120,
          render : (h,params) => {
           return h('div',((params.row.poundageRate)*100).toFixed(2))
          }
        },
        {
          title: "逾期日利率(%)",
          key: "overdueDayRate",
          align: "center",
          minWidth:120,
          render : (h,params) => {
           return h('div',((params.row.poundageRate)*100).toFixed(2))
          }

        },
     /*   {
          title: "违约金日利率",
          key: "penaltyDayRate",
          align: "center",
          minWidth:120,
        },*/
        {
          title: "创建时间",
          key: "createTime",
          align: "center",
          minWidth:150,
          render:(h,params) => {
            return h('div',this.getLocalTime(params.row.createTime))
          }
        },
        {
          title: "最后操作时间",
          key: "updateTime",
          align: "center",
          minWidth:150,
          render:(h,params) => {
            return h('div',params.row.updateTime ? this.getLocalTime(params.row.updateTime) : '—')
          }
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          minWidth:80,
          render:(h,params) => {
            let status = '';
            let btnType = '';
            switch (params.row.status){
              case 0 :
                status = '未发布';
                btnType = 'warning';
                break;
              case 1:
                status = '已上架';
                btnType = 'success';
                break;
              case 2:
                status = '已下架';
                btnType = 'error'
                break;
            }
            return h('Button',{
              props: {
                type: btnType,
                size: 'small'
              }
            }, status)
          }
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          minWidth:130,
          render: (h, params) => {
            let title = params.row.status == 2 ? '上架' : '下架';
            let status = params.row.status == 2 ? 1 : 2;
            return h("div", [
               h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  style: {
                    marginRight: "6px"
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '提示',
                        content: `<p>是否${title}该产品?</p>`,
                        onOk: () => {
                          let data = JSON.parse(JSON.stringify(params.row))
                          data.status = status;
                          this.ok(data);
                          //this.delItem('/bkproduct/discard', {id: params.row.id})
                        },
                        onCancel: () => {
                        }
                      });
                    }
                  }
                },
                 title
              ),

            ]);
          }
        }
      ],
        url:'/bkproduct/list',
        nameListUrl: '',
        params: {
          pageCurrent: 1,
          pageLimit: 10
        },
      }
    },
    mounted() {

    },
    methods: {

      resetValidate(name) { //清空判断
        this.$refs[name].resetFields();
      },
      ok(status) {
        let data = {
          id:status.id,
          name:status.name,
          money:status.money,
          realMoney:status.realMoney,
          day:status.day,
          dayRate:status.dayRate,
          poundageRate:status.poundageRate,
          overdueDayRate:status.overdueDayRate,
          penaltyDayRate:status.penaltyDayRate,
          merchantId:status.merchantId,
          status: status.status
        };
        this.$post('/bkproduct/modify', data).then(
          res => {
            if (res.code === 0) {
              console.log(res, "edit");
              this.$Message.success(`操作成功！`);
              this.getList(this.url);
            }
          },
          err => {
            console.log(err);
          }
        );
      },
      cancel() {
        this.showModal = false;
      },

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }
/deep/ .ivu-modal-footer{
  display: none;
}
/deep/ textarea.ivu-input{
  height:260px;
}
</style>
